<html>
  <head>
    <meta name="layout" content="menu"/>
    <script type='text/javascript' src='/js/jquery/flot/jquery.flot.js'></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
      var currentYear = new Date().getFullYear();
      var yearCount = 10;
      var lastYear = currentYear - yearCount;
      var prices = new Array();
      jQuery(document).ready(function($) {
        var options = {
          lines: { show: true },
          points: { show: true },
          xaxis: { tickDecimals: 0, tickSize: 1 },
          yaxis: {
            title: 'Price $'
          }
        };
        var data = [];
        var placeholder = jQuery("#chartHolder");
        jQuery.getJSON("/modelPrice/boundaries/${params.modelId}?year1=" + currentYear + "&year2=" + lastYear, function(data){
          prices[0] = data[currentYear.toString()];
          prices[yearCount] = data[lastYear.toString()];
          drawChart();
          loadNextPrice();
        });
      });
      var chart;
      function drawChart(){
        var plotArray = new Array();
    	for (i = 0; i < prices.length; i++){
          if(prices[i])
            plotArray[plotArray.length] = [i, prices[i]];
        }
        var options = {
          lines: { show: true },
          points: { show: true },
          xaxis: {
//            show: true,
//            position: "bottom"
            tickDecimals: 0,
            min: 0,
            max: 10
          },
          yaxis: {
            tickFormatter: function (v) {
              if(v == 0)
                return '';
              return v + "$"; },
            min: 0
          },
          grid: {
            show: true,
            borderWidth: 1
          }
        };
        var chartHolder = jQuery('#chartHolder');
    	jQuery.plot(chartHolder, [plotArray], options);
        var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>").text("Car age (years)").appendTo(chartHolder);
        xaxisLabel.css("margin-left", xaxisLabel.width() / 2 );
      }
      var currentIndex = 0;
      function findNextIndex(){
    	currentIndex++;
        return currentIndex < prices.length - 1 ? currentIndex : -1;
      }
      function loadNextPrice(){
        var i = findNextIndex();
        if(i == -1)
          return;
        jQuery.getJSON("/modelPrice/averagePrice/${params.modelId}?year=" + (currentYear - i), function(data){
          prices[currentYear - data.year] = data.price;
          drawChart();
          loadNextPrice();
        });
      }
    </script>
  </head>
  <body>
    <h1>${params.brand} ${params.model} prices</h1>
    <br/>
    <p>
      On this graphic you can see ${params.brand} ${params.model} prices based on car age. 
    </p>
    <div id="chartHolder" style="width: 500px; height: 400px"></div>
    
  
  </body>
</html>